<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./libs/scrollReveal/scrollreveal.min.js"></script>
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css">
  <link rel="stylesheet" href="./libs/glide/glide.core.min.css">
  <link rel="stylesheet" href="./libs/glide/glide.theme.min.css">
  <link rel="stylesheet" href="./css/index.css">
  
  <title>盛唐科技</title>
</head>
<body>
  <header class="header">
    <div class="logo">
      盛唐科技
    </div>
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于我们</a>
      <a href="#showcase">成功案例</a>
      <a href="#services">服务流程</a>
      <a href="#team">团队介绍</a>
      <a href="#company">公司动态</a>
      <i class="fa fa-search"></i>
    </nav>
    <div class="burger">
     <div class="burger-line1"></div>
     <div class="burger-line2"></div>
     <div class="burger-line3"></div>
    </div>
  </header>
  <!-- 轮播图 -->
  <div id="home" class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <div class="slide_caption">
            <h3>用创新点缀人生，让科技融入理想</h3>
            <p>Leading the era of science and technology, advancing with The Times.</p>
            <button class="explore_btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="drop"></div>
          <img src="./images/people-in-couch-1024248.jpg" alt="">
        </li>
        <li class="glide__slide">
          <div class="slide_caption left">
            <h3>知识改变人生，科技创造未来</h3>
            <p>Thought change fate, science and technology to create wealth.</p>
            <button class="explore_btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="drop"></div>
          <video src="./video/working-man.mp4"muted autoplay loop></video>
        </li>
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
    </div>
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
    </div>
  </div>
  
  <div class="content-wrap">
    <!-- 关于我们 -->
    <section id="about" class="about">
      <h2 class="title">关于我们</h2>
      <p class="intro">持续的创新,不断的超越,为用户创造价值,让员工实现梦想</p>
      <div class="features">
        <div class="feature">
          <i class="fas fa-lightbulb"></i>
          <h4 class="fea-title">
            品牌创意
          </h4>
          <p class="fea-content">
            再小的个体，也有自己的品牌
          </p>
        </div>
        <div class="feature">
          <i class="fas fa-chart-line"></i>
          <h4 class="fea-title">
            整合营销
          </h4>
          <p class="fea-content">
            通过市场进入分析，制定网络营销战略，网络营销实惠
          </p>
        </div>
        <div class="feature">
          <i class="fas fa-shopping-cart"></i>
          <h4 class="fea-title">
            电子商务
          </h4>
          <p class="fea-content">
            根据企业需求，开设不同的销售渠道，通过网上直销
          </p>
        </div>
        <div class="feature">
          <i class="fas fa-desktop"></i>
          <h4 class="fea-title">
            网页设计
          </h4>
          <p class="fea-content">
            抢先知晓全球最新鲜、最棒的创意资讯,扩充你的灵感库
          </p>
        </div>
        <div class="feature">
          <i class="fas fa-tachometer-alt"></i>
          <h4 class="fea-title">
            网站优化
          </h4>
          <p class="fea-content">
            通过SEO建议帮助企业网站满足用户需求的同时也符合搜索引擎优化规则
          </p>
        </div>
        <div class="feature">
          <i class="fas fa-server"></i>
          <h4 class="fea-title">
            网站架设
          </h4>
          <p class="fea-content">
            通过绑定域名和服务器，把网站展现给全世界
          </p>
        </div>
      </div>
    </section>
    <!-- 成功案例 -->
    <section id="showcase" class="showcase section-bg">
      <h2 class="title">成功案例</h2>
      <div class="filter-btn">
        <button class="btn active" data-filter="*">全部</button>
        <button class="btn" data-filter=".web">WEB</button>
        <button class="btn" data-filter=".mobile">移动</button>
        <button class="btn" data-filter=".science">科研</button>
      </div>
      <div class="cases">
        <div class="case-item web science">
          <img src="./images/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg" alt="">
        </div>
        <div class="case-item web science">
          <img src="./images/apple-apple-device-design-desk-285814.jpg" alt="">
        </div>
        <div class="case-item web science">
          <img src="./images/photo-of-imac-near-macbook-1029757.jpg" alt="">
        </div>
        <div class="case-item web">
          <img src="./images/apple-laptop-notebook-office-39284.jpg" alt="">
        </div>
        <div class="case-item mobile science">
          <img src="./images/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
        </div>
        <div class="case-item mobile">
          <img src="./images/person-holding-a-smartphone-892757.jpg" alt="">
        </div>
        <div class="case-item web">
          <img src="./images/blur-close-up-code-computer-546819.jpg" alt="">
        </div>
        <div class="case-item mobile">
          <img src="./images/bokeh-photography-of-person-holding-turned-on-iphone-1440727.jpg" alt="">
        </div>
      </div>
    </section>
    <!-- 服务流程 -->
    <section id="services" class="services">
      <h2 class="title">服务流程</h2>
      <p class="intro">提供网络基础服务(域名、主机、邮箱)和网络增值服务(网站建设和推广、网站优化)等业务</p>
      <div class="service">
        <div class="service-item">
          <i class="fas fa-comments"></i>
          <h4 class="service-title">
            需求沟通
          </h4>
          <p class="service-content">客户提出网站建设的基本需求，包括设计要求及功能要求</p>
        </div>
        <div class="service-item">
          <i class="fas fa-gavel"></i>
          <h4 class="service-title">
            项目评估
          </h4>
          <p class="service-content">根据客户提出的需求进行评估，估算出相应的时间与费用</p>
        </div>
        <div class="service-item">
          <i class="fas fa-file-signature"></i>
          <h4 class="service-title">
            签订合同
          </h4>
          <p class="service-content">合作双方确认费用、工期、合作要求的基础上，双方共同签订合同</p>
        </div>
        <div class="service-item">
          <i class="fas fa-user"></i>
          <h4 class="service-title">
            提案阶段
          </h4>
          <p class="service-content">完成网站初稿DEMO设计，包括首页风格，内页风格页面</p>
        </div>
        <div class="service-item">
          <i class="fas fa-chalkboard-teacher"></i>
          <h4 class="service-title">
            制作阶段
          </h4>
          <p class="service-content">完成所有页面设计，进行程序开发以及前后台的页面整合</p>
        </div>
        <div class="service-item">
          <i class="fas fa-user-check"></i>
          <h4 class="service-title">
            网站验收
          </h4>
          <p class="service-content">根据合同条款进行网站验收，并签署网站验收确认单</p>
        </div>
      </div>
    </section>
    <!-- 团队介绍 -->
    <section id="team" class="team section-bg">
      <h2 class="title">团队介绍</h2>
      <div class="team-members">
        <div class="team-member">
          <div class="profile-image">
            <img src="./images/man-wearing-black-suit-2955376.jpg" alt="">
          </div>
          <h4 class="name">何英舜</h4>
          <p class="position">前端工程师</p>
          <div class="social-links">
            <a href=""><i class="fab fa-weixin"></i></a>
            <a href=""><i class="fab fa-weibo"></i></a>
            <a href=""><i class="fab fa-github"></i></a>
            <a href=""><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
        <div class="team-member">
          <div class="profile-image">
            <img src="./images/smiling-woman-wearing-black-sweater-1587009.jpg" alt="">
          </div>
          <h4 class="name">凯特</h4>
          <p class="position">UI设计师</p>
          <div class="social-links">
            <a href=""><i class="fab fa-weixin"></i></a>
            <a href=""><i class="fab fa-weibo"></i></a>
            <a href=""><i class="fab fa-github"></i></a>
            <a href=""><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
        <div class="team-member">
          <div class="profile-image">
            <img src="./images/business-woman-2697954_1920.jpg" alt="">
          </div>
          <h4 class="name">弗兰西娅</h4>
          <p class="position">JAVA工程师</p>
          <div class="social-links">
            <a href=""><i class="fab fa-weixin"></i></a>
            <a href=""><i class="fab fa-weibo"></i></a>
            <a href=""><i class="fab fa-github"></i></a>
            <a href=""><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
        <div class="team-member">
          <div class="profile-image">
            <img src="./images/selective-focus-photograph-of-man-wearing-gray-suit-jacket-1138903.jpg" alt="">
          </div>
          <h4 class="name">罗杰·泰勒</h4>
          <p class="position">总经理</p>
          <div class="social-links">
            <a href=""><i class="fab fa-weixin"></i></a>
            <a href=""><i class="fab fa-weibo"></i></a>
            <a href=""><i class="fab fa-linkedin"></i></a>
            <a href=""><i class="fab fa-github"></i></a>
          </div>
        </div>
      </div>
    </section>
    <!-- 数据 -->
    <section class="data">
      <div class="data-piece">
        <i class="fas fa-code"></i>
        <div class="num">156</div>
        <div class="desc">
          行代码
        </div>
      </div>
      <div class="data-piece">
        <i class="fas fa-award"></i>
        <div class="num">288</div>
        <div class="desc">
          个奖项
        </div>
      </div>
      <div class="data-piece">
        <i class="fas fa-laugh-wink"></i>
        <div class="num">1588</div>
        <div class="desc">
          位客户
        </div>
      </div>
      <div class="data-piece">
        <i class="fas fa-folder"></i>
        <div class="num">200</div>
        <div class="desc">
          个项目
        </div>
      </div>
    </section>
    <!-- 公司动态 -->
    <section id="company" class="company">
      <h2 class="title">公司动态</h2>
      <p class="intro">关注公司动态，第一时间获取一手消息</p>
      <div class="activities">
        <div class="activity">
          <div class="image-wrap">
            <img src="./images/activity01-image.jpg" alt="">
          </div>
          <div class="meta">
            <p class="date">
              <i class="far fa-calendar"></i>
              2019年12月1日
            </p>
            <p class="comments">
              <i class="far far-comments"></i>
              33条评论
            </p>
          </div>
          <h4 class="act-title">
            6G进入研究阶段，堪比5G的王者！
          </h4>
          <article>
            业内预测2025年将启动6G技术的标准化，2028年投入商用，2030年正式提供服务。
            第六代移动通信技术将实现T级tera bps级数据传输速率，无线网络延迟小到微秒级。6G的速度将达到5G的50倍，延迟缩短到5G的十分之一。6G时代开启之后，汽车、机器人、无人机、家电、显示器等多种机械仪器将与互联网连接，为用户带来更丰富的体验。
          </article>
          <button class="read-more">阅读更多</button>
        </div>
        <div class="activity">
          <div class="image-wrap">
            <img src="./images/red-suspension-bridge-3493772.jpg" alt="">
          </div>
          <div class="meta">
            <p class="date">
              <i class="far fa-calendar"></i>
              2019年12月1日
            </p>
            <p class="comments">
              <i class="far far-comments"></i>
              33条评论
            </p>
          </div>
          <h4 class="act-title">
            6G进入研究阶段，堪比5G的王者！
          </h4>
          <article>
            业内预测2025年将启动6G技术的标准化，2028年投入商用，2030年正式提供服务。
            第六代移动通信技术将实现T级tera bps级数据传输速率，无线网络延迟小到微秒级。6G的速度将达到5G的50倍，延迟缩短到5G的十分之一。6G时代开启之后，汽车、机器人、无人机、家电、显示器等多种机械仪器将与互联网连接，为用户带来更丰富的体验。
          </article>
          <button class="read-more">阅读更多</button>
        </div>
        <div class="activity">
          <div class="image-wrap">
            <img src="./images/watercrafts-on-river-3464632.jpg" alt="">
          </div>
          <div class="meta">
            <p class="date">
              <i class="far fa-calendar"></i>
              2019年12月1日
            </p>
            <p class="comments">
              <i class="far far-comments"></i>
              33条评论
            </p>
          </div>
          <h4 class="act-title">
            6G进入研究阶段，堪比5G的王者！
          </h4>
          <article>
            业内预测2025年将启动6G技术的标准化，2028年投入商用，2030年正式提供服务。
            第六代移动通信技术将实现T级tera bps级数据传输速率，无线网络延迟小到微秒级。6G的速度将达到5G的50倍，延迟缩短到5G的十分之一。6G时代开启之后，汽车、机器人、无人机、家电、显示器等多种机械仪器将与互联网连接，为用户带来更丰富的体验。
          </article>
          <button class="read-more">阅读更多</button>
        </div>
      </div>
    </section>
    
  </div>
  <footer>
    <div class="footer-menus">
      <div class="contact-us">
        <p class="menu-title">
          联系我们
        </p>
        <p>地址:中国四川省广元市剑阁</p>
        <p>电话:18888888</p>
        <p>电子邮箱:123@abc.com</p>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">
          服务概览
        </p>
        <ul class="menu-items">
          <li>
            <a href="">网站建设</a>
          </li>
          <li>  
            <a href="">域名购买</a>
          </li>  
          <li>
            <a href="">网页设计</a>
          </li>
          <li>
            <a href="">移动应用</a>
          </li>
        </ul>
      </div>
      <div class="showcase-menu footer-menu">
        <p class="menu-title">
          成功案例
        </p>
        <ul class="menu-items">
          <li>
            <a href="">移动网站</a>
          </li>
          <li>  
            <a href="">科研项目</a>
          </li>  
          <li>
            <a href="">软件应用</a>
          </li>
        </ul>
      </div>
     
      <div class="activity-menu footer-menu">
        <p class="menu-title">
          公司动态
        </p>
        <ul class="menu-items">
          <li>
            <a href="">信息公开</a>
          </li>
          <li>  
            <a href="">最近新闻</a>
          </li>
          <li> 
            <a href="">最新博客</a>
          </li>
        </ul>
      </div>
      <div class="help-menu footer-menu">
        <p class="menu-title">
          帮助与支持
        </p>
        <ul class="menu-items">
          <li>
            <a href="">帮助中心</a>
          </li>
          <li>
            <a href="">联系客服</a>
          </li>
          <li>
            <a href="">文档资源</a>
          </li>
        </ul>
      </div>
      <p class="icp-info">川ICP备 12345678901-1</p>
      <p class="rights">
        &copy; 2020 盛唐科技版权所有
      </p>
      <div class="scorllToTop">
        <a href="#home"><i class="fas fa-chevron-up"></i></a>
      </div>
    </div>
  </footer>
  <script src="./libs/anime/anime.min.js"></script>
  <script src="./libs/glide/glide.min.js"></script>
  <script src="./libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>